<!DOCTYPE html>
<html lang="en" >
<head></head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <script src="http://boxphpjs.oss-cn-shanghai.aliyuncs.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<body>
<style type="text/css">

   .transform{
   	transform: rotate(270deg);
		-ms-transform: rotate(270deg);		/* IE 9 */
		-webkit-transform: rotate(270deg);	/* Safari and Chrome */
		-o-transform: rotate(270deg);		/* Opera */
		-moz-transform: rotate(270deg);		/* Firefox */
   }
	#test-div{
		  position:absolute;  background-color: #000;
	}
   .s_left{ float: left;  }

	/*.test-div video{ width: 667px; height:375px; }*/
	.toolbar{ display: none !important; }
   .header{ height: 40px; position:absolute; width: 100%; top: 0px; left: 0px ; color: #fff; line-height: 40px; padding: 5px; box-sizing: border-box }
   .s_right{ float: right; }
   .mid{ width: 100px;position:absolute; top: 50%; left: 50% ; margin-top: -20px; margin-left: -20px;}
   .mid img{ height: 40px }
</style>

      <div id="test-div">
         <div class="header">
             <div class="s_left"><课程介绍</div>
              <div class="s_right">提问</div>
         </div>
   	   <div class="test-div" width="100%" height="100%">
   	   <video id="media" webkit-playsinline="false"  width="100%" height="100%" -webkit-playsinline="false"    src="http://movie.ks.js.cn/flv/other/1_0.mp4"></video>
   	   </div>
          <div class="mid">
             <img src="/Public/Images/play.png" id="play_img" style="display:none">
             <img src="/Public/Images/loader.gif" id="load_img">
          </div>
         </div>
  
    <script type="text/javascript">
      var Media = document.getElementById("media"); 
      var t;
   	   $(function(){
   	   	    var h=$(window).height();
   	   	    var w=$(window).width();
                 $("body").height(h);
   	   	    var l=(h-w)/2;
                $("#test-div").css({'width':h+'px','height':w+"px",'left':"-"+l+"px",'top':l+'px'});
                $("#test-div video").css({'width':h+'px','height':w+"px"});
   	   	    $("#test-div").addClass("transform");
                setTimeout(function(){
                  $("#play_img").show();
                  $("#load_img").hide();
                },1000);
                
                $("#play_img").click(function(){
                   Media.play();
                   $(this).hide();
                   $("#test-div .header").hide();
                });
                $("#media").click(function(){
                    $("#test-div .header").show();
                    if(t){
                     clearTimeout(t);
                    }
                     t=setTimeout(function(){
                         $("#test-div .header").hide();
                     },2000);
                     $(this).attr("controls","controls");
                })

   	   })
         function onload(){
            alert(1);
         }
   </script> 
 </body></html>